<template>
<!-- 	<view>
		<view class="bottom-btn" @click="jumpNext">{{name}}</view>
	</view> -->
	<view class="footerBtn" v-show="footerBtn" :class="[isBg?'footerBtnBg m-fixed':'m-fixed',isIOS.devAgent == 'iOS'?'iosH':'andH']">
    <view class="btnBox">
      <view
        class="btn"
        :class="[!isRadius?'':'radiusBtn',btnWord.length==1?'radius50':'',disabled?'bgcGray':'']"
        :key="index"
        v-for="(item,index) in btnWord"
        @click="footerBtns(item.op)"
      >{{item.text?item.text:item}}</view>
    </view>
	</view>
</template>
<script>
export default {
  props: {
    btnWord: {
      //按钮数组
      type: Array,
      default: []
    },
    isBg: {
      //白色背景
      type: Boolean,
      default: false
    },
    positionState: {
      //定位方式
      type: Number,
      default: 0
    },
    btnState: {
      type: Boolean,
      default: true
    },
    isRadius: {
      //是否圆角
      type: Boolean,
      default: true
    },
    disabled:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      footerBtn: true,
      winHeight: null,
      isIOS:uni.getStorageSync('requestHeader')
    };
  },
  methods: {
    returnState() {
      if (this.positionState == 0) {
        //fixed定位
        return "m-fixed";
      } else if (this.positionState == 1) {
        //绝定定位
        return "m-absolute";
      } else if (this.positionState == 2) {
        //static定位
        return "m-static";
      }
    },
    footerBtns(index) {
      if(this.disabled) return;
        this.$emit("fromFooterBtn", index);
    },
	}
};
</script>

<style lang="scss">
.footerBtn {
	border-top: 2rpx solid #F2F2F7;
  &.m-fixed {
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
    &.iosH{
      height: 187rpx; 
    }
    &.andH{
      height: 140rpx;
    }
  }
  &.m-absolute {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
  }
  &.m-static {
    position: static;
    z-index: 1;
  }
  &.footerBtnBg {
    border-top: 1rpx solid #f5f5f5;
    background: #ffffff;
  }
  .btnBox {
    width: 643rpx;
    height: 100rpx;
    margin-top: 23rpx;
	
    display: flex;
    justify-content: space-between;
    align-items: center;
  //   &.addPadd {
		// padding: 0 52rpx;
  //   }
    .btn {
      flex: 1;
      height: 100%;
      line-height: 100rpx;
      font-size: $font-size-big;
      text-align: center;
      margin-right: 34rpx;
      color: #232323;
      background: #D2D2D2;
      &.radiusBtn {
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 10rpx;
      }
      &.radius50{
        border-radius: 50rpx;
      }
      &:last-child {
        margin-right: 0;
        color: #ffffff;
        background: $color-primary;
      }
      &.bgcGray{
        background: #d2d2d2;
      }
    }
  }
}
</style>
